<template>
  <div id="app">
    <div class="box">
      <span
        v-for="(item, index) in array"
        :key="index"
        :class="{ active: item === array[activeIndex] }"
        @click="activeIndex = index"
        >{{ item }}</span
      >
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const array = ['首页', '内容', '我的']
const activeIndex = ref(0)
</script>

<style></style>
<style>
.box {
  display: flex;
}
.box span {
  width: 50px;
  height: 60px;
}
.active {
  background-color: red;
}
</style>
